<template>
    <div class="web">
      
            <el-container>
            <el-aside width="200px" class="side">
                <div class="logo" @click="checkout()">
                    logo
                </div>
                <el-menu
                active-text-color="#ffd04b"
                background-color="#02151d"
                class="el-menu-vertical-demo"
                :default-active="defaultActive"
                text-color="#fff"
                :unique-opened="true"
                :router="true"
            
            >
            <el-menu-item index="/layout/index" >
                <el-icon><Monitor /></el-icon>
                        <span>
                            首页
                        </span>
           </el-menu-item>
                <el-sub-menu :index="v.path" v-for="v in menuList">
                <template #title>
                    <el-icon>
                        <component :is="dict[v.path]"></component>
                    </el-icon>
                    <span>
                        {{ v.name }}
                    </span>
                </template>
               
                    <el-menu-item :index="'/layout/'+val.path" v-for="val in v.children">
                        <el-icon><Paperclip /></el-icon>
                        <span>
                            <!-- {{ val.path }} -->
                            {{ val.name }}
                        </span>
                    </el-menu-item>
                  
                </el-sub-menu>
               
            </el-menu>

            </el-aside>
            <el-container class="content">
                <el-header class="head">Header</el-header>
                <el-main class="main">
                    <router-view/>
                </el-main>
            </el-container>
            </el-container>
        
    </div>
</template>
<script setup lang='ts'>
    // 权限 控制
    // 权限 角色 用户 
    // import {queryAuth} from "../../api/system.ts"
    import {onMounted, watch} from "vue"
    // import {createTree} from "../../utils/func.ts"
    import {ref} from "vue"
    import {useRoute} from "vue-router"
    import { set } from "../../utils/session.ts"
    const props=defineProps(['checkout','menuList'])
    const route=useRoute()
    const defaultActive=ref<string>('/layout/role')// 路由高亮
    // 图标与菜单映射
    const dict:Obj={
        countyment:'Printer',
        peoplement:'Calendar',
        hukoument:'CreditCard',
        partyment:'Box',
        setting:'Setting'
    }
    // 菜单列表
    // const List=ref<TreeItem[]>([])
    // 获取权限
    // const getData=async ()=>{
    //    let res:ResData= await queryAuth() as ResData
    //    let data:ListItem[]=res.data as ListItem[]
    //    List.value= createTree(data)
    // }
    onMounted(()=>{
    //    getData()
    })

    watch(route,(n)=>{// 监听路由 切换高亮
        // console.log(n);
        defaultActive.value=n.path
        
    },{immediate:true})

    const checkout=()=>{
        console.log(666);
        set("port",false)
        props.checkout()
        
    }
</script>
<style scoped lang="less">
.web{
    .side{
        height: 100vh;
        background: #02151d;
        color: white;
        .logo{
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .content{
        height: 100vh;
        background: rgb(239, 239, 239);
        .head{
            height: 60px;
            background: white;
        }
        .main{
            background: white;
            height: calc(100vh - 40px);
            width: calc(100% - 20px);
            margin: 10px;
            padding: 10px;
        }
    }
}
</style>
